<template>
	<scroll-view style="height: 100vh;" scroll-y="true">
		<view class="avatarbox">
			<text class="people">
				{{total}}位参与者
			</text>
			<view class="heading">
				<image :src="item.avatar" mode="aspectFill" v-for="(item,index) in listdata" :key="index"></image>
			</view>
			<text class="peoplemore"  v-if="emtype">
				-- 已没有更多了--
			</text>
			<text class="peoplemore" @click="moreload" v-else>
				加载更多...
			</text>
		</view>
		<!--轮播图广告-->
		<adver advertype="member"></adver>
		
	</scroll-view>
</template>

<script>
	/**
	 * 参与抽奖用户
	 */
	export default {
		data() {
			return {
				listdata: [],
				luckyid: 0,
				page:1,
				total:0,
				emtype:false,
			}
		},
			
		onLoad(option) {
			this.luckyid = option.id;
			this.userjoinlist(option.id);
		},
		methods: {
			//加载更多..
			moreload(){
				//console.log(this.listdata.length,this.total)
				if(this.emtype) return
				this.page +=1;
				this.userjoinlist(this.luckyid,this.page);
			},
			
			//获取参与列表
			userjoinlist(id,page=1) {
				//console.log(id,page);
				this.$HttRequest({
					url: '/lottery/partInList',
					param: {
						id: id,
						page: page,
						pageSize: 50,
					}
				},'GET',true).then((res) => {
					console.log(res);
					if (res.status === 10000) {
						if(res.data.data.length==0){
							this.emtype = true;
							return;
						}
						this.listdata = this.listdata.concat(res.data.data);
						this.total = res.data.total;
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f0f0;
	}

	.avatarbox {
		
		width: 90%;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 28rpx;
		color: #999999;

		.people {
			margin-top: 20rpx;
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex: 1;
		}

		.peoplemore {
			height: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100%;
			color: $uni-botton-primary;
		
		}

		.heading {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			margin: 40rpx 0;
			image {
				margin: 5rpx;
				width: 60rpx;
				height: 60rpx;
			}
		}
	}


</style>
